<script setup lang="ts">
import ChannelNav from './components/ChannelNav.vue.js'
import ArticleList from './components/ArticleList.vue.js'
import { ref } from 'vue'

// pinia使用
import { useXxx } from './store/xxx.js'
import { storeToRefs } from 'pinia'

const store = useXxx()
// toRefs 使用较少     storeToRefs:使用量很大
// storeToRefs 将pinia的数据(state与getters)转换成ref格式
// 用法   a:导入   import {storeToRefs} from 'pinia' b: const { count, getCount } = storeToRefs(store)

const { count, getCount } = storeToRefs(store)
console.log(count.value)
console.log(store.count)

// import { channels } from './api/index'
// const getData = async () => {
//   const res = await channels()
//   console.log(res.data.channels)
// }
// getData()
const currentId = ref<number>(-1)
const setId = (id: number) => {
  currentId.value = id
}
</script>

<template>
  <h3>{{ count }}</h3>
  <h3>{{ getCount }}</h3>
  <hr />
  <h3>{{ store.count }}</h3>
  <h3>{{ store.getCount }}</h3>
  <button @click="store.setCount(1)">点击+1</button>
  <ChannelNav @setId="setId" :currentId="currentId"></ChannelNav>
  <ArticleList :currentId="currentId"></ArticleList>
</template>
